<template>
  <div>
    <nav>
      <div class="good clearfix">
        <div :class="item.class"  @click="itemClick" v-for ="item in items.quickly">
          <img :src="item.img" :alt="item.title">
        </div>
      </div>
      <!--预售专场-->
      <div class="presellBox">
        <div class="presellTitle" v-if="items.pre_info"><img src="/static/images/index/presell.jpg"></div>
        <ul>
          <li v-for ="item in items.pre_info">
            <a href="javascript:void(0)" :data-brand_id="item.id"><img class="sortImg" :src="item.banner_path"></a>
          </li>
        </ul>
      </div>
      <!--全部品牌-->
      <div>
        <div v-if="items.brand"><img src="/static/images/index/all_nav.png"></div>
        <ul>
          <li v-for ="item in items.brand">
            <a href="javascript:void(0)" :data-brand_id="item.brand_id"><img class="sortImg" :src="item.cover" :alt="item.name"></a>
          </li>
        </ul>
      </div>
      <!--即将登陆品牌-->
      <div>
        <div><img src="/static/images/index/future_good_nav.jpg"></div>
        <ul>
          <li v-for ="item in items.future_Brand">
            <a href="javascript:void(0)" data-brand_id="142"><img class="sortImg" :src="item.banner_path" alt="渴望Orijen"></a>
          </li>
        </ul>
      </div>
    </nav>
    <!--精选单品-->
    <div><img src="/static/images/index/selected.png"></div>
    <div class="good_list clearfix">
      <div class="good" v-for="item in items.goods">
        <a href="javascript:void(0)" class="list" :data_goods_id="item.goods_id">
          <img :src=" item.photo|| '/static/images/icon/defaultgoodsBig.png'" :alt="item.subject" class="goodsImg">
          <p class="name" v-text="item.subject">梦吉Monge   果冻系列系列 金枪鱼鱼肉果冻猫罐头 80g</p><p class="sale_price sale_noprice"><span>批发价{{item.price=='?' ? '' : item.price}} </span><img v-if ="item.price=='?'" src="/static/images/icon/icon_no.jpg"></p>
          <p class="price">最低零售价¥{{item.market_price}}</p>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'quicklyNav',
    data () {
      return {
        itemClick: function () {
//          let emitClassName = this.$el.className
          this.$emit('1')
        }
      }
    },
    props: ['items']
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ad {padding-top:50px;}
  nav {padding:0 2%;}
  nav .good,nav .good1,nav .order1{padding-top:2%;}
  nav .good div {width:32%;float:left;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}
  nav .good1 .order1 {width:100%;}
  nav .good div>a {display:block;}
  nav .good .replenishment {margin:0 2%;}
  img{
    border: none;
    width: 100%;
    vertical-align: middle;
  }
  .clear { clear: both; }
  .clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
  .clearfix{*zoom:1;}
  nav .sort li {margin-bottom:4px;}
  nav .sort li a{display:block;}
  ol, ul, li { list-style: none; padding: 0; margin: 0; }
  .presellTitle.future{margin-bottom:10px;width: 100%;}
  .good_list {padding:0 5px;}
  .good_list .good .list {background:#fff; display:block;box-sizing:border-box;-webkit-box-sizing:border-box;border-bottom:10px solid #f3f4f5;border-left:5px solid #f3f4f5;border-right:5px solid #f3f4f5;}
  .good_list .good {width:50%;float:left;}
  .good_list div p {text-align:center;}
  .good_list div .name {font-size:13px;color:#333; height:20px; line-height:20px; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
  .good_list div .sale_price {font-size:16px;color:#ea5858;margin:2px 0;}
  .good_list .sale_price span {font-size:12px;}
  .good_list div .price {color:#999;font-size:12px;padding-bottom:10px;}
  .good_list .sale_noprice img{width:20px; height:20px; margin-top:-2px;}
  .good_list .sale_noprice span{color:#333;}
  a{text-decoration: none;color: #333}
  /*bannerè½®æ’­*/
  .swiper-container {width: 100%;padding-top:44px;}
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide img{
    width:100%;
  }
  .presellBox{width:100%;}
  .presellTitle{width:42%; margin:12px auto 5px;}
  .presellBox li{ position:relative; margin-bottom:4px;}
  .presellBox li .li_con{position:absolute; width:100%; text-align:center; left:0; top:30%; color:#fff;}
  .presellBox li .li_con p{font-size:20px; font-weight:bold; letter-spacing:8px; margin-bottom:5px;}

</style>
